<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{component/_layout :: layout(~{::title},~{::headTitle}, ~{::section},~{::link},~{::script})}">
<head>
    <meta charset="UTF-8">
    <title>巡查检查系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/css/elementUI.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo.css}">
</head>
<body>
<!--自定义头部标题-->
<headTitle>
    <h2 class="headTitle">单词巡查列表</h2>
</headTitle>
<!--自定义的主页样式-->
<section>
    <div id="app">
        <!--展示巡查表格-->
        <el-table :data="mcInspectData" height="525" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="inspectDate" label="巡查日期" width="160"></el-table-column>
            <el-table-column prop="inspectPerson" label="巡检人员" width="80"></el-table-column>
            <el-table-column prop="inspectCompan" label="所属公司" width="150"></el-table-column>
            <el-table-column prop="inspectPhone" label="联系电话" width="150"></el-table-column>
            <el-table-column prop="inspectIdcard" label="巡查人员身份证信息" width="180"></el-table-column>
            <el-table-column prop="inspectEquipment" label="巡检设备" width="120"></el-table-column>
            <el-table-column prop="inspectEquipmenttype" label="巡检设备类型" width="120"></el-table-column>
            <el-table-column prop="inspectBreak" label="巡查类容" ></el-table-column>
            <el-table-column  label="CUP状态" width="100">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.cpuStatus === '0'" type="warning">异常</el-tag>
                    <el-tag v-if="scope.row.cpuStatus === '1'" type="success">正常</el-tag>
                </template>
            </el-table-column>
            <el-table-column  label="RAM状态" width="100">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.ramStatus === '0'" type="warning">异常</el-tag>
                    <el-tag v-if="scope.row.ramStatus === '1'" type="success">正常</el-tag>
                </template>
            </el-table-column>
            <el-table-column  label="USB状态" width="100">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.usbStatus === '0'" type="warning">异常</el-tag>
                    <el-tag v-if="scope.row.usbStatus === '1'" type="success">正常</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createdBy" label="创建人" width="100"></el-table-column>
            <el-table-column width="150" align="right">
                <template slot="header" slot-scope="scope">
                    <el-input v-model="mcInspectQueryVo.inspectCompan" size="mini" @change="queryMcInspect" placeholder="输入所属公司搜索"/>
                </template>
                <template slot-scope="scope"  v-if="mcInspectData[scope.$index].id>1">
<!--                    <el-button size="mini" @click="userEdit(mcInspectData[scope.$index].id)">修改</el-button>-->
<!--                    <el-button size="mini" type="danger" @click="userDelete(mcInspectData[scope.$index].id)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <!--分页插件-->
        <el-pagination class="pageModel"
                       background
                       layout="prev, pager, next"
                       :current-page="index"
                       @current-change="updatePage"
                       :page-size="page"
                       :total="sumPage">
        </el-pagination>
    </div>
</section>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: function () {
            return {
                //当前页数
                index: 1,
                //每页显示多少条数据
                page: 7,
                //总共多少条数据
                sumPage: 0,
                //获取到巡查的信息
                mcInspectData: [],
                //条件
                mcInspectQueryVo:{
                    inspectDate:new Date(),
                    inspectPerson:'',
                    inspectCompan:'',
                    inspectIdcard:''
                }
            }
        },
        //加载事件
        created() {
            this.getMcInspectData(this.index,this.page);
        },
        //函数集群
        methods: {
            //隔行换色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 0) {
                    return 'warning-row';
                } else if (rowIndex % 2 === 1) {
                    return 'success-row';
                }
                return '';
            },
            //获取巡查信息
            getMcInspectData(index, page){
                axios.post(`/yyds/machine_system/mc-inspect/list/${index}/${page}`,{
                    params: this.mcInspectQueryVo
                }).then(resp=>{
                    this.mcInspectData = resp.data.map.items;
                    this.sumPage = resp.data.map.total;
                });
            },
            //分页时
            updatePage(val) {
                this.getMcInspectData(val, this.page);
            },
            queryMcInspect(){
                this.getMcInspectData("1", this.page);
            },
        },
    })
</script>
</body>
</html>